
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Layui</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/lib/bootstrap/bootstrap.min.css" media="all">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  </head>
  <body class="m-3">
    <div class="d-flex">
      <input id="teacherId" type="hidden" value="${teacherId}" />
      <div class="col-auto">
        <input id="teacherName" value="" class="form-control form-control-sm " placeholder="请输入教师姓名"/>
      </div>
      <button id="searchBtn" class="layui-btn layui-btn-sm layui-btn-primary"><i
        class="layui-icon layui-icon-search"></i>搜索
      </button>
      <button id="resetBtn" class="layui-btn layui-btn-sm layui-btn-primary"
              style="border: 1px solid #FF7670;color: #FF7670;"><i
        class="layui-icon layui-icon-close"></i>
        重置
      </button>
    </div>
    <table class="layui-hide" id="teacherTable" lay-filter="teacherTable"></table>
    <script src="${pageContext.request.contextPath}/lib/jquery-3.4.1/jquery-3.4.1.min.js" charset="utf-8"></script>
    <script src="${pageContext.request.contextPath}/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
    <script src="${pageContext.request.contextPath}/js/lay-config.js" charset="utf-8"></script>
    <script>
        var table = null;
        var layer = null;
        layui.use(['table', 'layer'], function () {
            table = layui.table;
            layer = layui.layer;
            table.render({
                elem: '#teacherTable',
                url: '/teacher.do?method=list',
                height: 'full-80',
                cols: [[
                    {type: 'radio'},
                    {field: 'teacherName', title: '姓名', align: 'center'},
                    {field: 'phone', title: '电话', align: 'center'},
                    {field: 'sex', title: '性别', align: 'center'},
                    {field: 'teacherNum', title: '编号', align: 'center'},
                    {field: 'teacherDesc', title: '描述', align: 'center'}
                ]],
                page: true,
                limit: 10,
                limits: [10, 20, 30, 50],
                done:function (res) {
                    var teacherId = $("#teacherId").val();
                    var dataArr = res.data;
                    for(var i =0;i<dataArr.length;i++){
                        if(dataArr[i].teacherId == teacherId){
                             $('div.layui-unselect.layui-form-radio')[i].click();
                        }
                    }
                }
            })

            //表格重载
            function reload() {
                table.reload('teacherTable', {
                    where: { //设定异步数据接口的额外参数，任意设
                        teacherName: $("#teacherName").val()
                    },
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                }); //只重载数据
            }

            //搜索按钮点击事件
            $("#searchBtn").click(function () {
                reload();
            })
            //重置
            $("#resetBtn").click(function () {
                //清空搜索框
                $("#teacherName").val('');
                reload();
            })
            //获取选中的教师id
            table.on('row(teacherTable)', function (obj) {
                $("#teacherId").val(obj.data.teacherId)
            })
        });

        function getTeacher() {
            var teacherId = $("#teacherId").val();
            if (!teacherId) {
                layer.msg('请选择教师!');
                return;
            }
            return{
                teacherId:$("#teacherId").val()
            }
        }
    </script>
  
  </body>
</html>
